<template>
  <div>
    <div class="diatitle" style="margin: 10px 0">图片上传</div>
    <el-upload
      :action="upurl"
      ref="uploadMutiple"
      :data="myData"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-change="imgchange"
      :file-list="fileList"
      multiple
      :on-success="getupload"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <div id="preview" @paste="handlePaste">
      <span
        ><i class="el-icon-s-opportunity" style="color: #fb894c"></i>点击此处
        将图片按Ctrl+V 粘贴至此处</span
      >
    </div>
    <el-dialog :visible.sync="innerVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
    <div @click="getImgUrl">提交</div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      limit: 3,
      upurl: "https://api110", //上传的地址
      myData: {
        key: "Gn1xVdBiTClSSHKZifg0pTQSU5XGagWO",
      }, //上传时附带的额外参数
      fileList: [], //上传的文件列表
      dialogImageUrl: "",
      innerVisible: false,
      upload_list: [], //提交的图片数组
    };
  },
  mounted() {},
  methods: {
    handlePaste(event) {
      const items = (event.clipboardData || window.clipboardData).items;
      let file = null;
      if (!items || items.length === 0) {
        this.$message.error("当前浏览器不支持本地");
        return;
      }
      // 搜索剪切板items
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf("image") !== -1) {
          file = items[i].getAsFile();
          break;
        }
      }
      if (!file) {
        this.$message.error("粘贴内容非图片");
        return;
      }
      if (this.fileList.length >= this.limit) {
        this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); // 图片数量超出
        return;
      }
      this.$refs.uploadMutiple.handleStart(file); // 将粘贴过来的图片加入预上传队列
      this.$refs.uploadMutiple.submit(); // 提交图片上传队列
    },
    //上传
    imgchange(file, fileList) {
      this.fileList = fileList;
      console.log("成功", file, fileList, this.fileList);
    },
    //on-remove 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      console.log(this.fileList, this.file);
      this.fileList = fileList;
      var index = this.upload_list.indexOf(file.url);
      console.log(index);
      this.upload_list.splice(index, 1);
    },
    //on-preview 点击文件列表中已上传的文件时的钩子(预览图片弹窗)
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.innerVisible = true;
    },
    // 提交时打印
    getImgUrl() {
      console.log(this.upload_list);
    },
    // 上传成功之后push到数组
    getupload(res, file, fileList) {
      this.upload_list.push(res.info.url);
      console.log(this.upload_list);
    },
  },
};
</script>
<!-- <style lang="less" scoped>
    .box {}
</style> -->
